page-home {

  .w33 {
    width: 25%;
    float: left;
    text-align: center;
  }

  .mytask {
    height: 27%;
  }

  .myteskicon {
    padding: 2rem 0 2rem 0;
    background-color: rgba(148, 149, 156, 0.1);
  }

  .clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
  }

  .tasklist {
    height: 73%;
    background-color: rgba(83, 197, 255, 0.2);
  }

  /* banner */
  .tutorial-page {

    .toolbar-background {
      background: #8B8A8A;
      border-color: transparent;
    }

    .slide-zoom {
      height: 100%;
    }

    .slide-title {
      margin-top: 3.8rem;
    }

    .slide-image {
      max-height: 50%;
      max-width: 60%;
      margin: 18px 0;
    }

    b {
      font-weight: 500;
    }

    p {
      padding: 0 40px;
      font-size: 14px;
      line-height: 1.5;
      color: #60646B;

      b {
        color: #000000;
      }
    }

  }

  /** beijing **/
  .card-background-page-home {

    ion-card-home {
      position: relative;
      text-align: center;
    }

    .card-title-home {
      position: absolute;
      top: 36%;
      font-size: 2.0em;
      width: 100%;
      font-weight: bold;
      color: #fff;
    }

    .card-subtitle-home {
      background: #88888888;
      text-align: center;
      font-size: 1.0em;
      position: absolute;
      top: 82%;
      width: 55%;
      color: #fff;
    }

    .card-button-home {
      position: absolute;
      top: 6%;
      left: 5px;
      width: 100%;
      font-weight: bold;
      color: #fff;
    }

  }


  //ion-grid{
  //  ion-row{
  //    ion-col{
  //      background: red;
  //      margin:0 1rem 0 1rem!important;
  //    }
 //   }
 // }
  ion-col div {

    border-radius: 2px;
    padding: 5px;
    text-align: center;
  }

  p {
    padding: 10px 0 0 10px !important;
    margin: 0;
  }



  /**
   * 瀑布流样式
   */
  $bg: #4F000B;
  $itemBg1: #720026;
  $itemBg2: #CE4257;
  $itemBg3: #FFC093;
  $itemBg4: #FF7F51;
  $counterBg: #222;

  body,
  html {
    position: relative;
    width: 100%;
    height: 100%;
    background: $bg;
    font-family: "PT Mono", monospace;
  }

  .masonry {
    column-count: 1;
    column-gap: 0;
    counter-reset: item-counter;

    @media screen and (min-width: 400px) {
      column-count: 3;
    }

    @media screen and (min-width: 600px) {
      column-count: 3;
    }

    @media screen and (min-width: 800px) {
      column-count: 4;
    }

    @media screen and (min-width: 1100px) {
      column-count: 5;
    }
  }




}
